<template>
  <div class="b-tabs">
    <template v-for="item in items" :key="item.id">
      <div
        class="b-tabs-item"
        :class="{ active: modelValue === item.id }"
        @click="handleClick($event, item.id)"
      >
        {{ item.label }}
      </div>
    </template>
  </div>
</template>
<script setup lang="ts">
import { ref, type PropType } from 'vue'

defineProps({
  items: {
    type: Array as PropType<
      {
        id: String
        label: String
      }[]
    >,
    default: () => []
  },
  modelValue: {
    type: String,
    default: ''
  }
})

const emit = defineEmits(['update:modelValue'])

function handleClick(e: MouseEvent, id: string) {
  e.target.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'center' })
  emit('update:modelValue', id)
}
</script>
<style scoped lang="scss">
.b-tabs {
  width: 100%;
  display: flex;
  gap: 16px;
  overflow-x: auto;
  font-family: 'LianMengQiYiLuShuaiZhengRuiHeiTi';
  .b-tabs-item {
    flex-shrink: 0;
    cursor: pointer;
    &.active {
      color: var(--el-color-primary);
    }
  }
  &::-webkit-scrollbar {
    width: 0;
    height: 0;
  }
}
</style>
